<template>
    <el-tabs style="height:50px;" v-model="editableTabsValue" type="card"
             closable @edit="handleTabsEdit" @tab-click="tabClick">
        <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.label"
                :name="item.name"
        >
            <span slot="label"><i :class="item.icon"></i>&nbsp;&nbsp;{{item.label}}</span>
            {{item.content}}
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {mapActions} from 'vuex';

    export default {
        name: "Tab",
        computed: {
            // 从vuex中获取活动的Tab列表
            editableTabs: ({
                get() {
                    return this.$store.state.menustore.tabs
                },
                set(val) {
                    this.$store.state.menustore.tabs = val
                }
            }),
            // 从vuex中获取本来激活的那个tab
            editableTabsValue: ({
                get() {
                    return this.$store.state.menustore.editableTabsValue
                },
                set(val) {
                    this.$store.state.menustore.editableTabsValue = val
                }
            })
        },
        data() {
            return {};
        },
        methods: {
            ...mapActions({
                setActiveTabsAction: 'menustore/setActiveTabsAction',
                selectMenuAction: 'menustore/selectMenuAction'
            }),

            // tab点击事件
            tabClick(item) {
                // this.$confirm('此操作将刷新当前页面, 是否继续?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                //
                // }).catch(() => {
                //     return;
                // });

                let obj = {}
                obj.label = item.label;
                obj.name = item.name;
                this.selectMenuAction({item: obj});
                this.$router.push({name: item.name});

        },


        handleTabsEdit(targetName, action) {
            if (action === 'add') {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: 'New Tab',
                    name: newTabName,
                    content: 'New Tab content'
                });
                this.editableTabsValue = newTabName;
            }
            if (action === 'remove') {
                // 设置首页不能关闭
                if (targetName === 'deskTop') {
                    return;
                }

                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                // 存储当天打开的Tab集合
                sessionStorage.setItem('tabList', JSON.stringify(this.editableTabs));
                // 储存当前激活的选项卡
                this.setActiveTabsAction(this.editableTabsValue);
            }
        }
    }
    }
</script>

<style scoped>

</style>